<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <h2>用药记录</h2>
          <el-form :inline="true" :model="searchForm" ref="searchFormRef">
            <el-form-item label="用药时间" prop="dateRange">
              <div style="display: flex; gap: 10px;">
                <el-date-picker
                  v-model="searchForm.startTime"
                  type="date"
                  placeholder="开始日期"
                  value-format="YYYY-MM-DD"
                  :max-date="searchForm.endTime"
                />
                <span style="align-self: center">至</span>
                <el-date-picker
                  v-model="searchForm.endTime"
                  type="date"
                  placeholder="结束日期"
                  value-format="YYYY-MM-DD"
                  :min-date="searchForm.startTime"
                />
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
      
      <el-table :data="medicationData" border stripe v-loading="loading" element-loading-text="数据加载中..." element-loading-background="rgba(255, 255, 255, 0.8)">
        <el-table-column prop="medicationTime" label="用药时间" width="180"></el-table-column>
        <el-table-column prop="name" label="药品名称"></el-table-column>
        <el-table-column prop="dosage" label="剂量"></el-table-column>
      </el-table>

      <div style="margin-top: 20px">
        <el-pagination
            @current-change="currentChange"
            @size-change="sizeChange"
            :page-size="pageInfo.pageSize"
            :current-page="pageInfo.pageNum"
            background
            layout="total,sizes, prev, pager, next"
            :total="pageInfo.total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import http from '@/utils/http.js'
import utils from "@/utils/tools.js";
import { ElMessage } from 'element-plus'

const medicationData = ref([])
const pageInfo = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0
})
const loading = ref(false)

const searchForm = reactive({
  startTime: '',
  endTime: ''
})

const searchFormRef = ref()

async function getMedicationList() {
  loading.value = true
  try {
    const params = {
      pageNum: pageInfo.value.pageNum,
      pageSize: pageInfo.value.pageSize,
      elderId: utils.getCurrentUser().id,
      medicationStartTime: searchForm.startTime,
      medicationEndTime: searchForm.endTime
    }
    const res = await http.get('/medicationRecord/page', { params })
    medicationData.value = res.data.list
    pageInfo.value.total = res.data.total
  } catch (e) {
    console.error('获取用药记录失败:', e)
    ElMessage.error('数据加载失败')
  } finally {
    loading.value = false
  }
}

function currentChange(e) {
  pageInfo.value.pageNum = e
  getMedicationList()
}

function sizeChange(e) {
  pageInfo.value.pageSize = e
  getMedicationList()
}

function search() {
  pageInfo.value.pageNum = 1
  getMedicationList()
}

function resetSearch() {
  searchFormRef.value.resetFields()
  searchForm.startTime = ''
  searchForm.endTime = ''
  getMedicationList()
}

onMounted(() => {
  getMedicationList()
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
</style> 